<template>
  <div class="personal-center">
    <div class="nav-bar">
      <NavBar />
    </div>
    <div class="container">
      <!-- 菜单 -->
      <div class="container_menu">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <Menu :menuList="menuRouters" />
        </el-menu>
      </div>
      <!-- 内容 -->
      <div class="primaryContent">
        <el-card class="el-card">
          <router-view></router-view>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavBar from "@/layout/header/index.vue";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { constantRoute } from "@/router/router.js";
import Menu from "./Menu.vue";
const menuRouters = constantRoute[2].children;

let $route = useRoute();

</script>

<style scoped lang="scss">
.personal-center {
  width: 100%;
  height: 100%;
  background-color: #f2f3f5;
  .nav-bar {
    width: 100%;
    height: 55px;
  }
  .container {
    width: 100%;
    height: calc(100% - 55px);
    display: flex;
    .container_menu {
      width: 200px;
      height: 100%;
      .el-menu-vertical-demo {
        height: 100%;
        border: none;
      }
    }
    .primaryContent {
      width: calc(100% - 200px);
      height: 100%;
      box-sizing: border-box;
      .el-card {
        height: 100%;
        position: relative;
        overflow: unset;
        box-shadow: none;
        box-sizing: border-box;
        border: none;
        background-color: #f2f3f5;
      }
    }
  }
}
</style>